<html xmlns:concordion="http://www.concordion.org/2007/concordion">
<head>
<link href="../../../../../concordion.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <h1>Surplus Rows</h1>

    <p>
        If the collection contains more objects than expected, extra rows are
        added to the table. These rows are marked with CSS <code>class="surplus"</code>
        on the <code>&lt;tr&gt;</code> element.
    </p>


    <div class="example">

        <h3>Example</h3>

        <p>Given a method <code>getPeople()</code> that returns a Collection containing the following <code>Person</code> objects:</p>

        <table concordion:execute="addPerson(#firstName, #lastName)">
            <tr>
                <th concordion:set="#firstName">First Name</th>
                <th concordion:set="#lastName">Last Name</th>
			</tr>
			<tr>
				<td>John</td>
				<td>Travolta</td>
			</tr>
			<tr>
				<td>Cliff</td>
				<td>Richard</td>
			</tr>
		</table>


        <p>And the following instrumentation:</p>

<pre class="html" concordion:set="#fragment">
&lt;table concordion:verifyRows="#person : getPeople()"&gt;
    &lt;tr&gt;
        &lt;th concordion:assertEquals="#person.firstName"&gt;First Name&lt;/th&gt;
        &lt;th concordion:assertEquals="#person.lastName"&gt;Last Name&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Travolta&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</pre>

        <p>Results in this output:</p>

<pre class="html" concordion:assertEquals="getOutputFragment(#fragment)">
&lt;table concordion:verifyRows="#person : getPeople()"&gt;
    &lt;tr&gt;
        &lt;th concordion:assertEquals="#person.firstName"&gt;First Name&lt;/th&gt;
        &lt;th concordion:assertEquals="#person.lastName"&gt;Last Name&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="success"&gt;John&lt;/td&gt;
        &lt;td class="success"&gt;Travolta&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="surplus"&gt; _
&lt;td class="failure"&gt;&lt;del class="expected"&gt;&amp;#160;&lt;/del&gt;
&lt;ins class="actual"&gt;Cliff&lt;/ins&gt;&lt;/td&gt; _
&lt;td class="failure"&gt;&lt;del class="expected"&gt;&amp;#160;&lt;/del&gt;
&lt;ins class="actual"&gt;Richard&lt;/ins&gt;&lt;/td&gt; _
&lt;/tr&gt; _
&lt;/table&gt;
</pre>

    </div>



</body>
</html>